<template>
  <div class="notice-list-view">
    <div
      class="notice-section-main"
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.01)"
    >
      <div class="list-item" v-for="item in notices" :key="item.id">
        <Notice :notice="item"></Notice>
      </div>
    </div>
  </div>
</template>

<script>
import Notice from "_c/Notice";

export default {
  name: "NoticeListView",
  components: { Notice },
  data() {
    return {
      loading: false,
      notices: [],
    };
  },
  mounted() {
    this.getCourseNoticeList()
  },
  methods: {
    getCourseNoticeList() {
      this.loading = true;
      this.$api.getCourseNotice({
        courseId: this.$route.params.courseId
      }).then((res) => {
        this.notices = res.data.data;
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.notice-section-main{
  min-height: 540px;
}
.list-item {
  margin-bottom: 20px;
}
</style>
